<!--  -->
<template>
  <div class="infoview">
    <div>
      <div style="margin-top: 10px" class="keywordRow">
        <el-row>
          <span>关键字：</span>
          <el-input placeholder="小区名称" prefix-icon="el-icon-search" v-model="keyword" id="queryText"> </el-input>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px; text-align: center">
      <el-row>
        <el-button type="primary" size="small" @click="showArea(keyword, '重庆', 0)">查询</el-button>
        <el-button type="primary" size="small" @click="showAreaInExtent(0)">显示附近所有小区</el-button>

        <el-button type="primary" size="small" @click="removeAll(false)">清除</el-button>
      </el-row>
    </div>
    <div class="resultView" v-show="hasResult" v-loading="isLoading">
      <el-table :data="tableData" style="width: 480px" height="250" @row-click="handleRowClick" @filter-change="handleFilterChange">
        <el-table-column fixed prop="name" label="名称" width="100"> </el-table-column>
        <el-table-column prop="detail_info.tag" label="类型" width="100"> </el-table-column>
        <el-table-column prop="address" label="地址" width="150"> </el-table-column>
        <el-table-column width="130" :filters="priceFilterArr" filter-placement="bottom-end" column-key="price">
          <template slot="header">
            <span>均价</span>
            <el-popover popper-class="colorPopover" placement="right" title="颜色说明" width="200" trigger="hover">
              <div class="block">
                <el-image style="width: 10px; height: 10px" src="img/color/EC3F23.png" fit="fill"></el-image>
                <span class="demonstration" style="font-size: 5px">1.5万以上</span>
              </div>
              <div class="block">
                <el-image style="width: 10px; height: 10px" src="img/color/F30170.png" fit="fill"></el-image>
                <span class="demonstration" style="font-size: 5px">1-1.5万</span>
              </div>
              <div class="block">
                <el-image style="width: 10px; height: 10px" src="img/color/CB39B7.png" fit="fill"></el-image>
                <span class="demonstration" style="font-size: 5px">0.8-1万</span>
              </div>
              <div class="block">
                <el-image style="width: 10px; height: 10px" src="img/color/6665E6.png" fit="fill"></el-image>
                <span class="demonstration" style="font-size: 5px">0.5-0.8万</span>
              </div>
              <div class="block">
                <el-image style="width: 10px; height: 10px" src="img/color/007DED.png" fit="fill"></el-image>
                <span class="demonstration" style="font-size: 5px">0.5万以下</span>
              </div>
              <div class="block">
                <el-image style="width: 10px; height: 10px" src="img/color/FFFFFF.png" fit="fill"></el-image>
                <span class="demonstration" style="font-size: 5px">暂无数据</span>
              </div>
              <el-button slot="reference" icon="el-icon-info" class="infoIcon"></el-button>
            </el-popover>
            <!-- <el-image fit="fill" src="img/渐变.png" style="width: 350px; height: 70px"></el-image> -->

            <!---->
            <!--src="img/color/EC3F23.png"-->
            <!-- <div class="block">
              <el-image style="width: 10px; height: 10px" src="img/color/EC3F23.png" fit="fill"></el-image>
              <span class="demonstration" style="font-size: 5px">1.5万以上</span>
            </div>
            <div class="block">
              <el-image style="width: 10px; height: 10px" src="img/color/F30170.png" fit="fill"></el-image>
              <span class="demonstration">1-1.5万</span>
            </div> -->
            <!-- <el-image style="width: 100px; height: 100px" src="img/color/CB39B7.png" fit="fill"></el-image>
            <span class="demonstration">0.8-1万</span>
            <el-image style="width: 100px; height: 100px" src="img/color/6665E6.png" fit="fill"></el-image>
            <span class="demonstration">0.5-0.8万</span>
            <el-image style="width: 100px; height: 100px" src="img/color/007DED.png" fit="fill"></el-image>
            <span class="demonstration">0.5万以下</span> -->
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.ke_info != null && scope.row.ke_info.comPrice != null" :style="getColorText(scope.row)">{{ scope.row.ke_info.comPrice + scope.row.ke_info.comPriceUnit }}</span>
            <span v-else>'暂无数据'</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination small layout="total,prev,pager,next" style="float: right" @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" :total="total"> </el-pagination>
    </div>
    <div id="allmap" style="display: none"></div>
  </div>
</template>

<script>
import BMap from 'BMap'
import communityApi from '@/api/community.js'
export default {
  data() {
    return {
      input1: '',
      keyword: '',
      hasResult: false,
      isLoading: false,
      tableData: [],
      communityList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,

      isSearchOne: null,
      colors: ['#EC3F23', '#F30170', '#CB39B7', '#6665E6', '#007DED'],
      priceFilterArr: [
        { text: '1.5万以上', value: '#EC3F23' },
        { text: '1-1.5万', value: '#F30170' },
        { text: '0.8-1万', value: '#CB39B7' },
        { text: '0.5-0.8万', value: '#6665E6' },
        { text: '0.5万以下', value: '#007DED' },
        { text: '暂无数据', value: '#ffffff' }
      ],

      filterData: null,
      loading: null
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    if (!this.map.communityGraphicLayer) {
      this.map.communityGraphicLayer = new this.mars3d.layer.GraphicLayer()
      this.map.addLayer(this.map.communityGraphicLayer)
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    var map = new BMap.Map('allmap')
    this.BMap = map
  },
  beforeDestroy() {
    this.removeAll(true)
  },

  methods: {
    queryHouseOutline(hid, callback) {
      var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18'
      var url = baseURL + '&uid=' + hid
      callback && (window.queryHouseOutlineCallback = callback)
      $.ajax({
        type: 'get',
        async: false,
        url: url,
        dataType: 'jsonp',
        jsonpCallback: 'queryHouseOutlineCallback',
        success: function (datas) {}
      })
    },
    /**
     * 模糊查询小区信息, 无返回值
     * @param {} house  小区名称
     * @param {} city   所属城市名称
     * @param {} ak     百度地图AK
     * @param {} callback   回调函数，该函数可以接收到请求的返回值
     */
    queryHouse(house, city, ak, pageNum, callback) {
      var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2'
      // http://api.map.baidu.com/place/v2/search?output=json&scope=2&q=龙江花园&region=重庆&ak=UgxnvZqij9D9YSFiD9dpY4KSQ0InBHVV
      var url = baseURL + '&q=' + house + '&region=' + city + '&city_limit=true' + '&tag=房地产' + '&page_size=' + this.pageSize + '&page_num=' + pageNum + '&ak=' + ak
      callback && (window.queryHouseCallback = callback)
      $.ajax({
        type: 'get',
        async: false,
        url: url,
        dataType: 'jsonp',
        jsonpCallback: 'queryHouseCallback',
        success: function (datas) {}
      })
    },
    /**
     *
     * @param {*} house
     * @param {*} city
     * @param {*} ak
     * @param {*} callback
     */
    queryHouseInExtent(ak, location, radius, pageNum, callback) {
      var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2'
      // http://api.map.baidu.com/place/v2/search?output=json&scope=2&q=龙江花园&region=重庆&ak=UgxnvZqij9D9YSFiD9dpY4KSQ0InBHVV
      var url =
        baseURL +
        '&query=房地产' +
        '&tag=房地产' +
        '&location=' +
        location.lat +
        ',' +
        location.lng +
        '&radius=' +
        radius +
        '&radius_limit=true' +
        '&page_size=' +
        '20' +
        '&page_num=' +
        pageNum +
        '&ak=' +
        ak

      callback && (window.queryHouseCallback = callback)
      $.ajax({
        type: 'get',
        async: false,
        url: url,
        dataType: 'jsonp',
        jsonpCallback: 'queryHouseCallback',
        success: function (datas) {}
      })
    },
    /**
     * 墨卡托坐标转百度坐标
     * @param {} coordinate
     * @return {}
     */
    coordinateToPoints(coordinate) {
      var points = []
      if (coordinate) {
        var arr = coordinate.split(';')
        if (arr) {
          for (var i = 0; i < arr.length; i++) {
            var coord = arr[i].split(',')
            if (coord && coord.length === 2) {
              var mctXY = new BMap.Pixel(coord[0], coord[1])

              var project = this.BMap.getMapType().getProjection()
              var point = project.pointToLngLat(mctXY)
              var bMapPoint = new BMap.Point(point.lng, point.lat)

              var pos = this.mars3d.PointTrans.bd2wgs([bMapPoint.lng, bMapPoint.lat])

              points.push(pos)
            }
          }
        }
      }
      return points
    },
    /**
     * 墨卡托坐标解析
     * @param {} mocator
     * @return {}
     */
    parseGeo(mocator) {
      if (typeof mocator !== 'string') {
        return {}
      }
      var t = mocator.split('|')
      var n = parseInt(t[0])
      var i = t[1]
      var r = t[2]
      var o = r.split(';')
      if (n === 4) {
        for (var a = [], s = 0; s < o.length - 1; s++) {
          o[s].split('-')[0] === '1' && a.push(o[s].split('-')[1])
        }
        o = a
        o.push('')
      }
      var u = []
      switch (n) {
        case 1:
          u.push(o[0])
          break
        case 2:
        case 3:
        case 4:
          for (var ss = 0; ss < o.length - 1; ss++) {
            var l = o[ss]
            if (l.length > 100) {
              l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g, '$1,$2;')
              u.push(l)
            } else {
              for (var c = [], d = l.split(','), f = 0; f < d.length; f += 2) {
                var p = d[f]
                var h = d[f + 1]
                c.push(p + ',' + h)
              }
              u.push(c.join(';'))
            }
          }
          break
        default:
          break
      }

      if (u.length <= 1) {
        u = u.toString()
      }

      var result = {
        type: n,
        bound: i,
        points: u
      }
      return result
    },
    showArea(keyword, city, pageNum) {
      if (!keyword) {
        this.$message.warning('请输入 名称 关键字！')
        return
      }
      var graphic = this.getArea(keyword, city, pageNum)

      // this.graphicLayer.addGraphic(this.graphic)
      // this.graphic.flyTo()
    },
    showAreaInExtent(pageNum) {
      var graphic = this.getAreaInExtent(pageNum, true)

      // this.graphicLayer.addGraphic(this.graphic)
      // this.graphic.flyTo()
    },
    getArea(keyword, city, pageNum) {
      this.isSearchOne = true
      var that = this

      this.hasResult = true
      this.isLoading = true

      this.queryHouse(keyword, city, this.ak.baidu, pageNum, function (data) {
        if (data.message === 'ok') {
          var houses = data.results

          that.isLoading = false
          if (houses && houses.length > 0) {
            for (const i in houses) {
              communityApi
                .getCommunityByName(houses[i].name, houses[i].area)
                .then((response) => {
                  if (response.code === 200) {
                    // 查询到了
                    that.$set(houses[i], 'ke_info', response.data)
                  }
                })
                .catch((e) => console.log(e))
            }

            that.tableData = houses
            that.total = data.total
          }
        } else {
          that.isLoading = false
          that.hasResult = false
        }
      })
    },
    getAreaInExtent(pageNum, isChangeExtent) {
      this.isSearchOne = false
      this.hasResult = true
      this.isLoading = true
      var that = this

      if (isChangeExtent) {
        this.location = this.map.getCameraView()
        this.extent = this.map.getExtent()
        this.radius = this.getFlatternDistance(this.location.lat, this.location.lng, this.extent.ymin, this.extent.xmin)
      }

      //
      // UgxnvZqij9D9YSFiD9dpY4KSQ0InBHVV
      this.queryHouseInExtent(this.ak.baidu, this.location, this.radius, pageNum, function (data) {
        if (data.message === 'ok') {
          var i
          var loopTimes = Math.ceil(data.total / 20)
          that.communityList = that.communityList.concat(data.results)
          pageNum++
          that.total = data.total

          for (i = 0; i < loopTimes; i++) {
            that.queryHouseInExtent(that.ak.baidu, that.location, that.radius, pageNum, function (data) {
              var houses = data.results
              that.isLoading = false
              if (houses && houses.length > 0) {
                for (const i in houses) {
                  communityApi
                    .getCommunityByName(houses[i].name, houses[i].area)
                    .then((response) => {
                      if (response.code === 200) {
                        // 查询到了
                        that.$set(houses[i], 'ke_info', response.data)
                      }
                    })
                    .catch((e) => console.log(e))
                }

                that.communityList = that.communityList.concat(houses)
              }
            })
            pageNum++
          }

          that.currentPage = 1
          that.handlePageChange(1)
        } else {
          that.isLoading = false
          that.hasResult = false
        }
      })
    },
    handleRowClick(house) {
      var that = this
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      that.queryHouseOutline(house.uid, function (houseOutline) {
        var geo = houseOutline.content.geo

        if (!geo) {
          var location = house.location
          var bMapPoint = new BMap.Point(location.lng, location.lat)

          var pos = that.mars3d.PointTrans.bd2wgs([bMapPoint.lng, bMapPoint.lat])
          const graphic = new that.mars3d.graphic.BillboardEntity({
            position: pos,
            style: {
              image: 'img/marker/mark3.png',
              scale: 1,
              scaleByDistance: true,
              scaleByDistance_far: 20000,
              scaleByDistance_farValue: 0.5,
              scaleByDistance_near: 1000,
              scaleByDistance_nearValue: 1,
              clampToGround: true, // 贴地
              highlight: { type: 'click', image: 'img/marker/mark1.png' },
              label: {
                text: house.name,
                font: '20px 楷体',
                color: that.Cesium.Color.AZURE,
                outline: true,
                outlineColor: that.Cesium.Color.BLACK,
                outlineWidth: 2,
                horizontalOrigin: that.Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: that.Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new that.Cesium.Cartesian2(0, -30), // 偏移量
                distanceDisplayCondition: new that.Cesium.DistanceDisplayCondition(0.0, 200000),
                clampToGround: true // 贴地
              }
            },
            attr: house.detail_info
          })

          var innerHtml = ''
          if (house.ke_info == null) {
            // 贝壳找房中没有查询到信息
            // innerHtml = `<table style="width:280px;">
            //     <tr><th scope="col" colspan="4"  style="text-ke_infoalign:center;font-size:15px;"房屋信息</th></tr>
            //     <tr><td >名称：</td><td >${house.name} </td></tr>
            //     <tr><td >类型：</td><td >${house.detail_info.tag} </td></tr>
            //     </table>`
            innerHtml = `
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">${house.name}</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">类型：</div>
                                    <div class="data-value"><span class="label-num">${house.detail_info.tag} </span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    `
          } else {
            // innerHtml = `<table style="width:280px;">
            //     <tr><th scope="col" colspan="4"  style="text-ke_infoalign:center;font-size:15px;"房屋信息</th></tr>
            //     <tr><td >名称：</td><td >${house.name} </td></tr>
            //     <tr><td >类型：</td><td >${house.detail_info.tag} </td></tr>
            //     <tr><td >地址：</td><td >${house.ke_info.comAdd} </td></tr>
            //     <tr><td >均价：</td><td >${house.ke_info.comPrice + house.ke_info.comPriceUnit} </td></tr>
            //     <tr><td >建筑类型：</td><td >${house.ke_info.buildingType} </td></tr>
            //     <tr><td >物业公司：</td><td >${house.ke_info.propertyCompany} </td></tr>
            //     <tr><td >物业费用：</td><td >${house.ke_info.propertyFee} </td></tr>
            //     <tr><td >开发商：</td><td >${house.ke_info.developers} </td></tr>
            //     <tr><td >楼栋总数：</td><td >${house.ke_info.buildingNumber}栋 </td></tr>
            //     <tr><td >房屋总数：</td><td >${house.ke_info.houseNumber}户 </td></tr>

            //   </table>`
            innerHtml = `<div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">${house.name}</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">类型：</div>
                                    <div class="data-value"><span class="label-num">${house.detail_info.tag} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">地址：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.comAdd} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">均价：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.comPrice} </span><span class="label-unit">${house.ke_info.comPriceUnit}</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">建筑类型：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.buildingType} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">物业公司：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.propertyCompany} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">物业费用：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.propertyFee} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">开发商：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.developers} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">楼栋总数：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.buildingNumber} </span><span class="label-unit">栋</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">房屋总数：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.houseNumber} </span><span class="label-unit">户</span>
                                    </div>
                                </div>

                            </div>
                        </div>`
          }

          graphic.bindPopup(innerHtml, {
            template: `<div class="marsTiltPanel marsTiltPanel-theme-${that.getColorText(house).color.slice(1)}">
                <div class="marsTiltPanel-wrap">
                    <div class="area">
                        {content}
                    </div>
                     <span class="mars3d-popup-close-button closeButton" >×</span>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
            horizontalOrigin: that.Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: that.Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new that.Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
            scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
            clampToGround: true
          })
          if (that.loading) {
            that.loading.close()
          }

          that.map.communityGraphicLayer.addGraphic(graphic)
          graphic.flyTo()
          graphic.openPopup(pos)
        } else {
          var geoObj = that.parseGeo(geo)

          // 边界点
          var points = that.coordinateToPoints(geoObj.points)

          var colorText = that.getColorText(house)

          const primitive = new that.mars3d.graphic.PolygonPrimitive({
            positions: points,
            style: {
              color: colorText.color,
              opacity: 0.4,
              // clampToGround: true,
              // classificationType: Cesium.ClassificationType.BOTH,

              // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
              highlight: {
                // type: mars3d.EventType.click,
                opacity: 0.8
              }
            }
          })

          var innerHtml = ''

          if (house.ke_info == null) {
            // 贝壳找房中没有查询到信息
            // innerHtml = `<table style="width:280px;">
            //     <tr><th scope="col" colspan="4"  style="text-ke_infoalign:center;font-size:15px;"房屋信息</th></tr>
            //     <tr><td >名称：</td><td >${house.name} </td></tr>
            //     <tr><td >类型：</td><td >${house.detail_info.tag} </td></tr>
            //     </table>`
            innerHtml = `
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">${house.name}</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">类型：</div>
                                    <div class="data-value"><span class="label-num">${house.detail_info.tag} </span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    `
          } else {
            // innerHtml = `<table style="width:280px;">
            //     <tr><th scope="col" colspan="4"  style="text-ke_infoalign:center;font-size:15px;"房屋信息</th></tr>
            //     <tr><td >名称：</td><td >${house.name} </td></tr>
            //     <tr><td >类型：</td><td >${house.detail_info.tag} </td></tr>
            //     <tr><td >地址：</td><td >${house.ke_info.comAdd} </td></tr>
            //     <tr><td >均价：</td><td >${house.ke_info.comPrice + house.ke_info.comPriceUnit} </td></tr>
            //     <tr><td >建筑类型：</td><td >${house.ke_info.buildingType} </td></tr>
            //     <tr><td >物业公司：</td><td >${house.ke_info.propertyCompany} </td></tr>
            //     <tr><td >物业费用：</td><td >${house.ke_info.propertyFee} </td></tr>
            //     <tr><td >开发商：</td><td >${house.ke_info.developers} </td></tr>
            //     <tr><td >楼栋总数：</td><td >${house.ke_info.buildingNumber}栋 </td></tr>
            //     <tr><td >房屋总数：</td><td >${house.ke_info.houseNumber}户 </td></tr>

            //   </table>`
            innerHtml = `<div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">${house.name}</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">类型：</div>
                                    <div class="data-value"><span class="label-num">${house.detail_info.tag} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">地址：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.comAdd} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">均价：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.comPrice} </span><span class="label-unit">${house.ke_info.comPriceUnit}</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">建筑类型：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.buildingType} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">物业公司：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.propertyCompany} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">物业费用：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.propertyFee} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">开发商：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.developers} </span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">楼栋总数：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.buildingNumber} </span><span class="label-unit">栋</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">房屋总数：</div>
                                    <div class="data-value"><span class="label-num">${house.ke_info.houseNumber} </span><span class="label-unit">户</span>
                                    </div>
                                </div>

                            </div>
                        </div>`
          }

          primitive.bindPopup(innerHtml, {
            template: `<div class="marsTiltPanel marsTiltPanel-theme-${that.getColorText(house).color.slice(1)}">
                <div class="marsTiltPanel-wrap">
                    <div class="area">
                        {content}
                    </div>
                     <span class="mars3d-popup-close-button closeButton" >×</span>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
            horizontalOrigin: that.Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: that.Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new that.Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
            scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
            clampToGround: true
          })

          if (that.loading) {
            that.loading.close()
          }
          that.map.communityGraphicLayer.addGraphic(primitive)
          primitive.flyTo()
          primitive.openPopup(primitive.center)
        }
      })
    },
    handlePageChange(page) {
      if (this.isSearchOne) {
        this.getArea(this.keyword, '重庆', page - 1)
      } else {
        if (this.filterData == null) {
          this.tableData = this.communityList.slice((page - 1) * this.pageSize, page * this.pageSize)
        } else {
          this.tableData = this.filterData.slice((page - 1) * this.pageSize, page * this.pageSize)
        }
      }
    },
    removeAll(noClearDraw) {
      this.keyword = ''
      this.hasResult = false

      this.communityList = []
      this.tableData = []
      this.total = 0

      this.currentPage = 0

      if (this.map.communityGraphicLayer && !noClearDraw) {
        this.map.communityGraphicLayer.clear()
        // this.map.communityGraphicLayer.remove()
        // this.map.communityGraphicLayer = new this.mars3d.layer.GraphicLayer()
        // this.map.addLayer(this.map.communityGraphicLayer)
      }
    },
    getColorText(row) {
      let colorText = '#8B8B8B'
      if (row.ke_info != null && row.ke_info.comPrice != null) {
        const price = row.ke_info.comPrice
        if (price > 15000) {
          colorText = this.colors[0]
        } else if (price > 10000) {
          colorText = this.colors[1]
        } else if (price > 8000) {
          colorText = this.colors[2]
        } else if (price > 5000) {
          colorText = this.colors[3]
        } else {
          colorText = this.colors[4]
        }
      }

      return {
        color: colorText
      }
    },

    getRad(d) {
      var PI = Math.PI
      return (d * PI) / 180.0
    },

    getFlatternDistance(lat1, lng1, lat2, lng2) {
      var EARTH_RADIUS = 6378137.0 // 单位M

      var f = this.getRad((lat1 + lat2) / 2)
      var g = this.getRad((lat1 - lat2) / 2)
      var l = this.getRad((lng1 - lng2) / 2)

      var sg = Math.sin(g)
      var sl = Math.sin(l)
      var sf = Math.sin(f)

      var s, c, w, r, d, h1, h2
      var a = EARTH_RADIUS
      var fl = 1 / 298.257

      sg = sg * sg
      sl = sl * sl
      sf = sf * sf

      s = sg * (1 - sl) + (1 - sf) * sl
      c = (1 - sg) * (1 - sl) + sf * sl

      w = Math.atan(Math.sqrt(s / c))
      r = Math.sqrt(s * c) / w
      d = 2 * w * a
      h1 = (3 * r - 1) / 2 / c
      h2 = (3 * r + 1) / 2 / s

      return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg))
    },

    handleFilterChange(filters) {
      if (filters.price.length === 0) {
        this.filterData = null
        this.currentPage = 1
        this.total = this.communityList.length

        this.handlePageChange(1)
      } else {
        let i = 0
        const arr = []
        for (i = 0; i < this.communityList.length; i++) {
          const colorText = this.getColorText(this.communityList[i]).color

          if (filters.price.indexOf(colorText) > -1) {
            arr.push(this.communityList[i])
          }
        }
        this.filterData = arr
        this.currentPage = 1
        this.total = arr.length

        this.handlePageChange(1)
      }
    }
  }
}
</script>
<style>
/**infoview浮动面板*/
.infoview {
  position: absolute;
  top: 70px;
  left: 20px;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
  /* box-shadow: 0 3px 14px rgba(128, 128, 128, 0.5); */
  z-index: 19870100;
}
.infoIcon {
  border: 0px;
}

.infoview-right {
  left: auto;
  right: 10px;
}

.infoview input,
.infoview select,
.infoview textarea {
  color: #ffffff;
  background-color: rgba(32, 160, 255, 0.2);
  border: 1px solid #e4eaec;
  font-size: 14px;
}

.infoview > div {
  margin-top: 5px;
}

/*divGraphic  */
/* DivGraphic 相关的样式 */

.marsBlackPanel {
  min-width: 90px;
  min-height: 35px;
  position: absolute;
  left: 16px;
  bottom: 31px;
  cursor: default;
  opacity: 0.96;
  box-sizing: border-box;
}

.marsBlackPanel::before {
  content: '';
  width: calc(100% + 22px);
  height: 39px;
  position: absolute;
  bottom: -39px;
  left: -22px;
  background: url('/img/marker/popupLbl.png') 0px 0px no-repeat;
  background-position: 0px 0px;
  background-size: cover;
}

.marsBlackPanel-text {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 1px 20px;
  font-size: 23px;
  font-family: 'MicrosoftYaHei';
  font-weight: 100;
  color: yellow;
  line-height: 33px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}

/**************** 一个渐变的文本面板,中间竖直连线 ****************/
.marsBlueGradientPnl {
  text-align: center;
  padding: 5px 30px;
  margin: 0;
  color: #fff;
  background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  max-height: 130px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.marsBlueGradientPnl:after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: calc(50% - 3px);
  display: block;
  width: 3px;
  height: 60px;
  border-right: 3px solid #2bcdbb;
}

.marsBlueGradientPnl-highlight {
  border: 2px solid yellow;
}
.marsBlueGradientPnl-highlight:after {
  border-right: 3px solid yellow;
}

/**************** 一个简洁文本面板,中间竖直连线 ****************/
.marsGreenGradientPnl {
  width: 100px;
  text-align: center;
  background-image: linear-gradient(to right, #565d39, #00ffc3);
  position: absolute;
  left: -50px;
  bottom: 30px;
  cursor: default;
  padding: 5px;
  border: 1px solid #9c9944e8;
}

.marsGreenGradientPnl:hover {
  border: 1px solid rgb(9, 255, 0);
}

.marsGreenGradientPnl::before {
  position: absolute;
  content: '';
  left: 50%;
  bottom: -30px;
  height: 30px;
  border-left: 2px dashed #c5e22770;
}

.marsGreenGradientPnl-highlight {
  border: 2px solid yellow;
}

.marsGreenGradientPnl-highlight::before {
  border-left: 2px dashed yellow !important;
}

/********** 面板：倾斜指向左下角的div1.png图片面板样式 ***********/

.marsImgPanel1 {
  position: relative;
  width: 200px;
  height: 134px;
  background: rgba(42, 42, 42, 0.8);
  border-radius: 4px;

  background: url('/img/marker/div1.png');
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  -webkit-animation: mymove 5s infinite;
  animation: mymove 5s infinite;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: mymove;
}

.marsImgPanel1 .title {
  position: relative;
  top: 20px;
  left: 70px;
  font-size: 15px;
  text-align: left;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.75);
}

/********** 面板：倾斜指向左下角的div2.png图片面板样式 ***********/
.marsImgPanel2 {
  position: relative;
  width: 200px;
  height: 157px;
  background: rgba(42, 42, 42, 0.8);
  border-radius: 4px;
  background: url('/img/marker/div2.png');
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  -webkit-animation: mymove 5s infinite;
  animation: mymove 5s infinite;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: mymove;
}

.marsImgPanel2 .title {
  position: inherit;
  top: 22px;
  left: 70px;
  font-size: 14px;
  text-align: left;

  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.75);
}

.marsImgPanel2 .content {
  position: inherit;
  font-size: 14px;
  top: 30px;
  left: 50px;
  width: 140px;
  height: auto;
  text-align: left;
  color: rgba(255, 255, 255, 1);
  overflow: hidden;
}

/********** 面板：倾斜指向左下角的面板样式 ***********/
.marsTiltPanel {
}
.marsTiltPanel-wrap {
  position: relative;
  padding: 30px;
  overflow: hidden;
}

.marsTiltPanel .area {
  position: relative;
  min-width: 180px;
}

.marsTiltPanel .b-t {
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  height: 1px;
  z-index: 10;
}

.marsTiltPanel .b-r {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 44px;
  width: 1px;
  z-index: 10;
}

.marsTiltPanel .b-b {
  position: absolute;
  left: 0;
  right: 44px;
  bottom: 0;
  height: 1px;
  z-index: 10;
}

.marsTiltPanel .b-l {
  position: absolute;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 1px;
  z-index: 10;
}

.marsTiltPanel .b-t-l {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 62px;
  transform: rotate(45deg) translate(52px, -22px);
  z-index: 10;
}

.marsTiltPanel .b-b-r {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 62px;
  transform: rotate(45deg) translate(-52px, 22px);
  z-index: 10;
}

.marsTiltPanel .label-wrap {
  padding-left: 12px;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}

.marsTiltPanel .title {
  margin-top: 20px;
  padding: 0 12px 0 30px;
  height: 36px;
  line-height: 36px;
  position: relative;
}

.marsTiltPanel .title::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  z-index: 10;
  height: 2px;
}

.marsTiltPanel .label-content {
  padding: 15px 0;
}

.marsTiltPanel .data-li {
  padding: 4px 45px 4px 0;
}

.marsTiltPanel .data-label,
.data-value {
  display: inline-block;
}

.marsTiltPanel .data-value {
  font-size: 14px;
}

.marsTiltPanel .label-num {
  margin-right: 3px;
  color: #f09e28;
  font-weight: 600;
}

.marsTiltPanel .label-tag {
  display: inline-block;
  position: relative;
  margin-right: 6px;
  padding: 0 6px;
  font-weight: 600;
  cursor: pointer;
  background-color: #909399;
  border-radius: 4px;
}

.marsTiltPanel .label-tag::after {
  content: attr(alt);
  display: inline-block;
  position: absolute;
  bottom: -22px;
  right: -35px;
  z-index: -1;
  padding: 2px 4px;
  color: #fff;
  font-size: 14px;
  background-color: #333;
  border-radius: 3px;
  opacity: 0;
  transition: all 0.3s ease-in;
}

.marsTiltPanel .label-tag:hover::after {
  opacity: 1;
  z-index: 11;
}

.marsTiltPanel .data-value-status-0 {
  background-color: #f0285c;
}

.marsTiltPanel .data-value-status-1 {
  background-color: #35b15b;
}

.marsTiltPanel .data-value-status-2 {
  background-color: #f09e28;
}

.marsTiltPanel .arrow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 45px;
  height: 2px;
  transform: rotate(-45deg) translate(5px, -15px);
}

.marsTiltPanel-theme-EC3F23 .b-t,
.marsTiltPanel-theme-EC3F23 .b-r,
.marsTiltPanel-theme-EC3F23 .b-b,
.marsTiltPanel-theme-EC3F23 .b-l,
.marsTiltPanel-theme-EC3F23 .b-t-l,
.marsTiltPanel-theme-EC3F23 .b-b-r {
  background-color: #ec3f23;
  box-shadow: 0 0 10px 2px #ec3f23;
}

.marsTiltPanel-theme-EC3F23 .area {
  background-image: linear-gradient(135deg, transparent 30px, #955448 30px, #955448 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #955448 30px, #955448 50.1%, transparent 50%);
}

.marsTiltPanel-theme-EC3F23 .title {
  background-image: linear-gradient(135deg, transparent 25px, #ec3f23 25px);
}

.marsTiltPanel-theme-EC3F23 .arrow,
.marsTiltPanel-theme-EC3F23 .title::before {
  background-color: #ec3f23;
}

.marsTiltPanel-theme-F30170 .b-t,
.marsTiltPanel-theme-F30170 .b-r,
.marsTiltPanel-theme-F30170 .b-b,
.marsTiltPanel-theme-F30170 .b-l,
.marsTiltPanel-theme-F30170 .b-t-l,
.marsTiltPanel-theme-F30170 .b-b-r {
  background-color: #f30170;
  box-shadow: 0 0 10px 2px #f30170;
}

.marsTiltPanel-theme-F30170 .area {
  background-image: linear-gradient(135deg, transparent 30px, #aa0552 30px, #aa0552 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #aa0552 30px, #aa0552 50.1%, transparent 50%);
}

.marsTiltPanel-theme-F30170 .title {
  background-image: linear-gradient(135deg, transparent 25px, #f30170 25px);
}

.marsTiltPanel-theme-F30170 .arrow,
.marsTiltPanel-theme-F30170 .title::before {
  background-color: #f30170;
}

.marsTiltPanel-theme-CB39B7 .b-t,
.marsTiltPanel-theme-CB39B7 .b-r,
.marsTiltPanel-theme-CB39B7 .b-b,
.marsTiltPanel-theme-CB39B7 .b-l,
.marsTiltPanel-theme-CB39B7 .b-t-l,
.marsTiltPanel-theme-CB39B7 .b-b-r {
  background-color: #cb39b7;
  box-shadow: 0 0 10px 2px #cb39b7;
}

.marsTiltPanel-theme-CB39B7 .area {
  background-image: linear-gradient(135deg, transparent 30px, #7c046c 30px, #7c046c 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #7c046c 30px, #7c046c 50.1%, transparent 50%);
}

.marsTiltPanel-theme-CB39B7 .title {
  background-image: linear-gradient(135deg, transparent 25px, #cb39b7 25px);
}

.marsTiltPanel-theme-CB39B7 .arrow,
.marsTiltPanel-theme-CB39B7 .title::before {
  background-color: #cb39b7;
}

.marsTiltPanel-theme-6665E6 .b-t,
.marsTiltPanel-theme-6665E6 .b-r,
.marsTiltPanel-theme-6665E6 .b-b,
.marsTiltPanel-theme-6665E6 .b-l,
.marsTiltPanel-theme-6665E6 .b-t-l,
.marsTiltPanel-theme-6665E6 .b-b-r {
  background-color: #6665e6;
  box-shadow: 0 0 10px 2px #6665e6;
}

.marsTiltPanel-theme-6665E6 .area {
  background-image: linear-gradient(135deg, transparent 30px, #1c1cd2 30px, #1c1cd2 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #1c1cd2 30px, #1c1cd2 50.1%, transparent 50%);
}

.marsTiltPanel-theme-6665E6 .title {
  background-image: linear-gradient(135deg, transparent 25px, #6665e6 25px);
}

.marsTiltPanel-theme-6665E6 .arrow,
.marsTiltPanel-theme-6665E6 .title::before {
  background-color: #6665e6;
}

.marsTiltPanel-theme-007DED .b-t,
.marsTiltPanel-theme-007DED .b-r,
.marsTiltPanel-theme-007DED .b-b,
.marsTiltPanel-theme-007DED .b-l,
.marsTiltPanel-theme-007DED .b-t-l,
.marsTiltPanel-theme-007DED .b-b-r {
  background-color: #007ded;
  box-shadow: 0 0 10px 2px #007ded;
}

.marsTiltPanel-theme-007DED .area {
  background-image: linear-gradient(135deg, transparent 30px, #065499 30px, #065499 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #065499 30px, #065499 50.1%, transparent 50%);
}

.marsTiltPanel-theme-007DED .title {
  background-image: linear-gradient(135deg, transparent 25px, #007ded 25px);
}

.marsTiltPanel-theme-007DED .arrow,
.marsTiltPanel-theme-007DED .title::before {
  background-color: #007ded;
}

.marsTiltPanel-theme-8B8B8B .b-t,
.marsTiltPanel-theme-8B8B8B .b-r,
.marsTiltPanel-theme-8B8B8B .b-b,
.marsTiltPanel-theme-8B8B8B .b-l,
.marsTiltPanel-theme-8B8B8B .b-t-l,
.marsTiltPanel-theme-8B8B8B .b-b-r {
  background-color: #8b8b8b;
  box-shadow: 0 0 10px 2px #8b8b8b;
}

.marsTiltPanel-theme-8B8B8B .area {
  background-image: linear-gradient(135deg, transparent 30px, #5c5959 30px, #5c5959 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #5c5959 30px, #5c5959 50%, transparent 50%);
}

.marsTiltPanel-theme-8B8B8B .title {
  background-image: linear-gradient(135deg, transparent 25px, #8b8b8b 25px);
}

.marsTiltPanel-theme-8B8B8B .arrow,
.marsTiltPanel-theme-8B8B8B .title::before {
  background-color: #8b8b8b;
}
/**************** 部分公共样式，如选中样式、动画等 ****************/

.animation-spaceInDown {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: spaceInDown;
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    transform-origin: 0% 100%;
    transform: scale(0.2) translate(0, 200%);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scale(1) translate(0, 0);
  }
}
</style>
